<!--
 * @Author: your name
 * @Date: 2020-04-24 18:10:26
 * @LastEditTime: 2020-04-29 09:30:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \five\index.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>鱼你一起</title>
  <link rel="stylesheet" href="./index.css" />
</head>
<body>
  <div v-cloak id="app">
    <div id="main">
      <img class="head-img" src="./images/background.png" width="100%" alt="">
      <!-- <div class="header">

      </div> -->
      <!-- <div class="activity-desc"> -->
        <!-- <div class="desc-text">
          <p>人世间有百媚千红，唯独你是我情之所钟！ 520去哪里？带TA去爱情海钓鱼，到深海开启宝箱！送给TA最靓的礼物！</p>
        </div>
      </div> -->
      <!-- 活动列表 -->
      <!-- <div class = "activity-box box-one">
        <img class="title award-first" src="./images/charm1.png" alt="">
        <div class = 'activity-first'>
        </div>
      </div>
      <div class = "activity-box box-one">
        <img class="title award-first" src="./images/charm1.png" alt="">
        <div class = 'activity-first'>
        </div>
      </div>
      <div class = "activity-box box-one">
        <img class="title award-first" src="./images/charm1.png" alt="">
        <div class = 'activity-first'>
        </div>
      </div> -->
      <!-- 榜单 -->
      <img class="head-img1" src="./images/header.png" width="100%" alt="">
      <img class="head-img2" src="./images/header1.png" width="100%" alt="">
      <!-- 钓鱼--PK -->
      <div class='list'>
        <div class = "list-first">
          <div class="list-btn" :class="{ 'list-btn-c': listStage ==1 }" @click="changeStage(1)"><p>钓鱼榜</p></div>
          <div class="list-btn" :class="{ 'list-btn-c': listStage ==2}" @click="changeStage(2)"><p>PK榜</p></div>
          <div class="list-btn" :class="{ 'list-btn-c': listStage ==3}" @click="changeStage(3)"><p>鱼你一起</p></div>
        </div>
        <div class = 'list-two'>
          <div>
            <div class='two-p1 line-two'><p>排名</p></div>
            <div class='two-p2 line-two'><p>头像</p></div>
            <div v-if="listStage == 3">
              <div class='two-p3 line-two'><p>昵称</p></div>
              <div class='two-p4 line-two'><p>礼物</p></div>
            </div>
            <div v-else>
              <div class='two-p3 line-two'><p>昵称和ID</p></div>
              <div class='two-p4 line-two'><p>收益</p></div>

            </div>
          </div>
        </div>
        <div v-show="listStage === 1 || listStage === 2" class="ranking-box" >
          <table>
            <tbody>
              <tr v-for="(item, index) in List" :key="'ranking-' + index" >
                <td width="10%" :class="{'ranking3': true, 'ranking-1': index === 0, 'ranking-2': index === 1, 'ranking-3': index === 2 }"><p>{{ index +1 }}</p></td>
                <td width="20%">
                  <div :class= "{'ranking-img': true, 'border-1': index === 0 , 'border-2': index === 1, 'border-3': index === 2 } " class="photo">
                    <!-- <img  :src="item.portrait" width="100%" alt=""> -->
                    <img  :src="item.portrait" width="100%" alt="">
                  </div>
                </td>
                <td width="30%" class="nickname">
                  <p>{{item.nickname}}</p>
                  <p>ID:{{item.uuid}}</p>
                </td>
                <td width="30%" class="score" v-if="listStage == 1">
                  <p>{{item.multiple}}倍</p>
                </td>
                <td width="30%" class="score" v-else>
                  <p>{{item.score}}</p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-show="listStage === 3" class="ranking-box">
          <table>
            <tbody>
              <tr v-for="(item, index) in List" :key="'ranking-' + index" >
                <td width="10%" :class="{'ranking3': true, 'ranking-1': index === 0, 'ranking-2': index === 1, 'ranking-3': index === 2 }"><p>{{ index +1 }}</p></td>
                <td width="20%" class="ranking-img3" >
                    <img  class="img1" :src="item.from_user ? item.from_user.image : ''" width="100%" alt="">
                    <img class="img2" :src="item.to_user ? item.to_user.image : ''" width="100%" alt="" >

                </td>
                <td width="30%" >
                  <div class="nickname3">
                    <div class="nickname3-1">
                      <p class="p1">{{item.from_user ? item.from_user.nickname : ''}}</p>
                      <p class="p2">{{item.to_user ? item.to_user.nickname : ''}}</p>
                    </div>
                  </div>

                  <div class="nickname3-2">
                    <p>送</p>
                  </div>
                </td>
                <td width="30%" class="score1">
                  <p>鱼你一起x{{item.gift_num}}</p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
      <div class="foot">
        <img class="foot-img" src="./images/foot (2).png" width="100%" alt="">
      </div>
      <!-- 消息弹窗 -->
    <div id="over-dialog" v-show="canShowTip">
      <div class="close" @click="canShowTip = false"></div>
      <p>{{ msg }}</p>
      <div class="btn" @click=" canShowTip = false">
        知道啦
      </div>
    </div>
    <!-- end -->
    <div v-show="overlayShow" class="overlay" @click.stop="closeAllDialog()"></div>
    </div>
  </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/tool.js"></script>
<script src="./js/flex.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      listStage:1,
      baseUrl: 'http://xs.ztaudio-activity.com',
      baseApiUrl : "http://ztaudio-activity.kekestar.cn",
      baseTestApi : "http://47.100.52.89",
      List:[],
      msg: '',
      canShowTip:false,
      overlayShow:false
    },
    computed: {

    },
    mounted() {
      this.getFishWinner()
    },
    methods:{
      closeAllDialog() {
        this.overlayShow = false
        this.canShowTip = false
      },
      changeStage(stage){
        this.listStage = stage
        if(stage==1){
          this.getFishWinner()
        }
        if(stage==2){
          this.getFishPk()
        }
        if(stage == 3){
          // this.getFishGift()
          this.getGifts()
        }
      },
      restlist(){
        this.List = []
      },
      getFishWinner() {
        let _this = this
        _this.restlist()
        kk.ajaxGet(_this.baseApiUrl + '/fish/winner/' , {}, function(res) {
          _this.List = res
        })
      },
      getFishPk() {
        let _this = this
        _this.restlist()
        kk.ajaxGet(_this.baseApiUrl + '/fish/pk/' , {}, function(res) {
          // console.log(res);
          _this.List = res
        })
      },
      getGifts() {
        let _this = this
        let now = Date.now()
	let arr = "2020/05/21 00:00:00".split(/[- : \/]/)
        let end = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5])
        end = Date.parse(end)

	console.log('now:' + now)
        console.log('end:' + end)

	if(now <= end) {
          _this.restlist()
          kk.get("https://sl-api.bianxiangapp.com:8866/gift/get_love_rank", { type: 1, gift_id: 180 }, function(res) {
            res = kk.parseBase64(res)
            _this.List = res.data.list
            localStorage.setItem('list', JSON.stringify(_this.List))
          })
        } else {
          let list = localStorage.getItem('list')
          _this.List = JSON.parse(list)
          _this.msg = '该榜单已结束，获奖用户可联系官方运营'
          _this.canShowTip = true
          this.overlayShow = true
        }
      }
    }
  })
</script>
</html>
